<template>
  <div>
    <Form
      ref="addForm"
      :model="addFunctionForm"
      :rules="addrules"
      label-position="right"
      :label-width="100"
    >
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="functionCode" :label="$t('module.function.code')">
            <Input
              v-model.trim="addFunctionForm.functionCode"
              :maxlength="30"
              :placeholder="$t('module.function.warning.enterFunctionCode')"
            ></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="functionLangs" :label="$t('module.function.name')">
            <LangInput v-model="addFunctionForm.functionLangs"></LangInput>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="functionDesc" :label="$t('module.function.description')">
            <Input
              v-model="addFunctionForm.functionDesc"
              :placeholder="$t('module.function.warning.enterFunctionDesc')"
            ></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="enabled" :label="$t('module.function.status')">
            <Select v-model="addFunctionForm.enabled" class="no-borderColor">
              <Option
                v-for="(item, index) in enabledForm"
                :value="item.id"
                :key="item.id + index"
              >{{ item.enabled }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="iconCls" :label="$t('module.function.iconCls')">
            <Input
              v-model="addFunctionForm.iconCls"
              :placeholder="$t('module.function.warning.enterIcon')"
              :maxlength="40"
            ></Input>
            <Icon :type="addFunctionForm.iconCls" class="icon-size icon-margin-right"></Icon>
            <span v-if="addFunctionForm.iconCls">{{ addFunctionForm.functionName }}</span>
            <Icon type="md-log-out" class="icon-select" @click.native="iconEdit"></Icon>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="parentFunctionName" :label="$t('module.function.parentNode')">
            <Input v-model="addFunctionForm.parentFunctionName" disabled></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="functionType" :label="$t('module.function.type')">
            <Select v-model="addFunctionForm.functionType" clearable>
              <Option value="1">{{ $t("module.function.categoryType") }}</Option>
              <Option value="0">{{ $t("module.function.functionType") }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="applicationId" :label="$t('module.function.applicationId')">
            <Select v-model="addFunctionForm.applicationId" class="no-borderColor" disabled>
              <Option
                v-for="(itemKey, index) in Object.keys(applicationList)"
                :value="itemKey"
                :key="index"
              >{{ applicationList[itemKey] }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <Form-item prop="sort" :label="$t('module.function.sortNo')">
            <InputNumber
              :min="0"
              :max="9999"
              v-model="addFunctionForm.sort"
              placeholder
              style="width:100%"
            ></InputNumber>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg" v-if="addFunctionForm.functionType != 1">
        <Col span="20">
          <Form-item prop="actionUrl" :label="$t('module.function.frontModule')">
            <Input
              v-model="addFunctionForm.actionUrl"
              :placeholder="$t('module.function.warning.url')"
            ></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="20">
          <RPButton
            class="ivu-btn-hr"
            style="margin-left:100px;"
            :loading="saveLoading"
            :text="$t('common.save')"
            optType="save"
            @click="save"
          />
          <RPButton
            class="ivu-btn-hr"
            style="margin-left:40px;"
            :text="$t('common.cancel')"
            optType="reset"
            @click="cancel"
          />
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import IconEdit from "./IconEdit.vue";
import functionAPI from "@/api/functionAPI.js";
import locales from "./locales.js";
import { codeReg } from "@/const.js";

export default {
  name: "newAddFunction",
  title: "this.$t('module.function.manageFunction')",
  mixins: [locales],
  props: {
    applicationList: {
      type: Object,
      default() {
        return {};
      }
    },
    newAddProps: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const validateFunctionCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionCode")));
      } else if (value.length > 30) {
        callback(new Error(this.$t("common.warning.codeCheckLength")));
      } else if (!new RegExp(codeReg).test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      } else if (new RegExp("[\u4e00-\u9fa5]").test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      }
      callback();
    };
    const validateFunctionName = (rule, value, callback) => {
      let flag = value.filter(item => {
        if (item.value == "") {
          return true;
        }
      });
      if (flag.length > 0 || value.length == 0) {
        callback(new Error(this.$t("module.function.warning.enterFunctionName")));
      } else {
        callback();
      }
    };
    const validateFunctionDesc = (rule, value, callback) => {
      if (value != null && value != value.trim() && value.trim() === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionDescription")));
      }
      if (value != null && value.length > 200) {
        callback(new Error(this.$t("module.function.warning.functionDescriptionMoreThan200Charts")));
      }
      callback();
    };
    const validateFunctionIcon = (rule, value, callback) => {
      if (value != null && value != value.trim() && value.trim() === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionIcon")));
      }
      callback();
    };
    const validateSort = (rule, value, callback) => {
      if (!new RegExp("^[0-9]d*$").test(value) && !value.replace(/(^\s*)|(\s*$)/g, "")) {
        callback(new Error(this.$t("module.function.warning.sortNoMustBeNum")));
      }
      callback();
    };
    return {
      saveLoading: false,
      addFunctionForm: {
        functionCode: "",
        functionName: "",
        functionLangs: [],
        functionId: "",
        enabled: "1",
        iconCls: "",
        parentFunctionName: this.newAddProps.parentFunctionName,
        functionModuleId: this.newAddProps.functionModuleId, //parentfunctionId
        functionDesc: "",
        sort: 0,
        actionUrl: "",
        functionType: "1",
        applicationId: this.newAddProps.applicationId
      },
      isAdd: false,
      enabledForm: [
        { id: "0", enabled: "无效" },
        { id: "1", enabled: "有效" }
      ],
      addrules: {
        functionCode: [{ validator: validateFunctionCode, trigger: "blur", required: true }],
        functionLangs: [{ validator: validateFunctionName, trigger: "change", required: true }],
        functionDesc: [{ validator: validateFunctionDesc, trigger: "blur" }],
        iconCls: [{ validator: validateFunctionIcon, trigger: "blur" }]
      }
    };
  },
  computed: {},

  created() {},

  methods: {
    iconEdit() {
      new this.$pageModal(IconEdit, {}, data => {
        if (!!data) {
          this.addFunctionForm.iconCls = data;
        }
      });
    },
    gotoAddFunction(data) {
      this.selectedData = data;
      this.addFunction(false);
    },

    save() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          let paramAdd = {
            functionCode: this.addFunctionForm.functionCode,
            applicationId: this.addFunctionForm.applicationId,
            functionName: this.addFunctionForm.functionName,
            functionDesc: this.addFunctionForm.functionDesc,
            enabled: this.addFunctionForm.enabled,
            iconCls: this.addFunctionForm.iconCls,
            functionType: this.addFunctionForm.functionType,
            actionUrl: this.addFunctionForm.actionUrl,
            functionModuleId: this.addFunctionForm.functionModuleId,
            sort: this.addFunctionForm.sort,
            functionLangs: this.addFunctionForm.functionLangs
          };
          functionAPI
            .addFunction(paramAdd)
            .then(data => {
              this.$emit("newAddFuntionSave", true);
            })
            .catch(error => {
              this.saveLoading = false;
            });
        }
      });
    },
    cancel() {
      this.$emit("newAddFuntionCancel");
    }
  },
  watch: {
    newAddProps: {
      handler(newName, oldName) {
        console.log(newName);
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      deep: true
    },
    "addFunctionForm.functionType": function(value) {
      if (value == 0) {
        this.addrules.actionUrl = [
          { trigger: "blur", message: this.$t("module.function.warning.enterActionUrl"), required: true },
          { max: 4000, message: this.$t("module.function.warning.urlLength"), trigger: 'blur' }
        ];
      } else {
        this.addrules.actionUrl = "";
      }
    }
  },
  directives: {}
};
</script>

<style>
</style>
